<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="blob:http://127.0.80.1/5c702227-924d-4115-9072-008365061140">
    <title>文件上传</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
<input type="file" id="fileInput">
<button id="uploadBtn">上传文件</button>
<div id="result"></div>

<script>
    $(document).ready(function () {
        $('#uploadBtn').click(function () {
            const file = $('#fileInput')[0].files[0];
            if (!file) {
                $('#result').text('请选择文件');
                return;
            }
            const formData = new FormData();
            formData.append('file', file);
            formData.append('quality', 0.8);

            $.ajax({
                url: 'http://localhost:8010/survey/02/compress',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                contentType: false, // 让 jQuery 自动设置合适的 Content-Type
                success: function (response) {
                    $('#result').text('文件上传成功');
                    // 这里可以根据后端返回的数据进行更多操作，比如展示压缩后的图片等
                },
                error: function (error) {
                    $('#result').text('文件上传失败');
                    console.log(error);
                }
            });
        });
    });
</script>
</body>
</html>